<template>
    <div class="box-container">
        <div class="box3d">
            <div class="tai-ji page-center" />
            <div
                ref="theEightDiagrams"
                class="the-eight-diagrams page-center"
            >
                <i
                    v-for="theEightDiagram in theEightDiagrams"
                    :key="theEightDiagram"
                    class="iconfont the-eight-diagram"
                    :class="'el-icon-' + theEightDiagram"
                />
            </div>
            <div
                ref="theEightDiagramText"
                class="the-eight-diagram-text page-center"
            >
                <span
                    v-for="(theEightDiagram, i) in theEightDiagramText"
                    :key="theEightDiagram + i"
                    class="the-eight-diagram-text-item"
                >
                    {{ theEightDiagram }}
                </span>
            </div>
            <div
                ref="heavenlyStems"
                class="heavenly-stems page-center"
            >
                <span
                    v-for="(heavenlyStem, i) in heavenlyStems"
                    :key="heavenlyStem + i"
                    class="heavenly-stem"
                >
                    {{ heavenlyStem }}
                </span>
            </div>
            <div
                ref="earthlyBranches"
                class="earthly-branches page-center"
            >
                <span
                    v-for="(earthlyBranchesItem, i) in earthlyBranches"
                    :key="earthlyBranchesItem + i"
                    class="earthly-branches-item"
                >
                    {{ earthlyBranchesItem }}
                </span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "TaiJi",
    data() {
        return {
            turns: ['theEightDiagrams', 'theEightDiagramText', 'heavenlyStems', 'earthlyBranches'],
            theEightDiagrams: ['gan', 'xun', 'kan', 'gen', 'kun', 'zhen', 'li', 'dui'],
            theEightDiagramText: ['乾', '巽', '坎', '艮', '坤', '震', '离', '兑'],
            heavenlyStems: ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'],
            earthlyBranches: ['甲', '子', '乙', '丑', '丙', '寅', '丁', '卯', '乾', '戊', '辰', '己', '巳', '庚', '午', '辛', '未', '壬', '申', '癸', '酉', '坤']
        }
    },
    mounted() {
        this.turns.forEach(e => {
            let children = this.$refs[e].childNodes;
            let length = children.length - 1;
            for (let i = 1; i < length; i++) {
                let child = children[i];
                let r = null;
                if (i === 1) {
                    r = 0;
                } else {
                    r = (360 / (length - 1)) * (i - 1);
                }
                let x = (Math.PI / (length - 1)).toFixed(0) * (i - 1);
                let y = (Math.PI / (length - 1)).toFixed(0) * (i - 1);
                child.style.webkitTransform = `rotateZ(${r}deg) translate3d(${x}px, ${y}px, 0)`;
                child.style.transform = `rotateZ(${r}deg) translate3d(${x}px, ${y}px, 0)`;
            }
        });
    }
}
</script>

<style scoped lang="scss">
    $taiJiSize: 60;
    $heavenlyStemsSize: 153;
    $earthlyBranchesSize: 182;
    $theEightDiagramIconSize: 87;
    $theEightDiagramTextSize: 125;
    $flipSize: 60;

    /* 太极 */
    .tai-ji {
        width: 0;
        height: #{$taiJiSize}px;
        border-radius: 50%;
        /*border: rgb(0,86,107) 1px solid;*/
        border-left: 30px solid #000;
        border-right: 30px solid #fff;
        /*box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);*/
        position: absolute;
        animation: turn 2s linear infinite;
        /*top: 51.9% !important;
        left: 50.9% !important;*/
    }
    .tai-ji::before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-radius: 50%;
        padding: (#{$taiJiSize / 4 * 0.2 + 'px'});
        background-color: white;
        border: black (#{$taiJiSize / 4 * 0.8 + 'px'}) solid;
        transform: translate(-50%, 0);
    }
    .tai-ji::after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-radius: 50%;
        background-color: black;
        border: white (#{($taiJiSize / 4 * 0.8) + 'px'}) solid;
        padding: (#{$taiJiSize / 4 * 0.2 + 'px'});
        transform: translate(-50%, 0);
    }

    /* 正转 */
    @keyframes turn {
        from {
            transform: translate(-50%, -50%) rotateX(#{$flipSize}deg) rotate(0);
        }
        to {
            transform: translate(-50%, -50%) rotateX(#{$flipSize}deg) rotate(360deg);
        }
    }

    /* 逆转 */
    @keyframes reverseTurn {
        /* transform: translate(-50%, -50%) rotateX(70deg) rotate(0); */
        from {
            transform: translate(-50%, -50%) rotateX(#{$flipSize}deg) rotate(360deg);
        }
        to {
            transform: translate(-50%, -50%) rotateX(#{$flipSize}deg) rotate(0);
        }
    }

    /* 八卦-图标 */
    .the-eight-diagram {
        font-size: 3px;
        width: #{$theEightDiagramIconSize}px;
        height: #{$theEightDiagramIconSize}px;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 1px;
    }
    .the-eight-diagrams {
        width: #{$theEightDiagramIconSize}px;
        height: #{$theEightDiagramIconSize}px;
        padding: 1px;
        text-align: center;
        border-radius: 50%;
        /*border: 1px white solid;*/
        animation: reverseTurn 3s linear infinite;
    }

    /* 八卦-文字 */
    .the-eight-diagram-text-item {
        font-size: 2px;
        width: #{$theEightDiagramTextSize}px;
        height: #{$theEightDiagramTextSize}px;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .the-eight-diagram-text {
        width: #{$theEightDiagramTextSize}px;
        height: #{$theEightDiagramTextSize}px;
        border-radius: 50%;
        /*border: 1px white solid;*/
        text-align: center;
        animation: turn 4s linear infinite;
    }

    /* 天干 */
    .heavenly-stem {
        font-size: 3px;
        width: #{$heavenlyStemsSize}px;
        height: #{$heavenlyStemsSize}px;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .heavenly-stems {
        height: #{$heavenlyStemsSize}px;
        width: #{$heavenlyStemsSize}px;
        border-radius: 50%;
        /*border: 1px white solid;*/
        text-align: center;
        animation: reverseTurn 5s linear infinite;
    }

    /* 地支 时辰 */
    .earthly-branches-item {
        font-size: 10px;
        width: #{$earthlyBranchesSize}px;
        height: #{$earthlyBranchesSize}px;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .earthly-branches {
        width: #{$earthlyBranchesSize}px;
        height: #{$earthlyBranchesSize}px;
        border-radius: 50%;
        /*border: 1px white solid;*/
        text-align: center;
        animation: turn 6s linear infinite;
        /*transform: rotate3d(0.6, 1, 0.6, 10deg);*/
    }

    .page-center {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .box-container {
        height: 83vh;
        color: white;
        background-color: black;
        transform-origin: center;
        text-shadow: 0 0 25px white;
        /*, 0 0 30px white, 0 0 45px white, 0 0 60px white*/
        /*transform-style: preserve-3d;*/
        /*-webkit-perspective: 100px;*/
        overflow: hidden;
    }
    .box3d {
        width: 30vw;
        height: 38vh;
        margin: 0;
        /*transform: skewX(30deg);*/
    }
</style>
